<template>
	<view>
		<view>
			<!-- 瀑布流布局列表 -->
			<view class="pubuBox">
				<view class="pubuItem" v-for="(item, itemIndex) in sellGoodsList" :key="itemIndex"
					:class="{ longPressed: itemIndex === longPressedIndex }" @click="navigateToProductDetail(item.id)"
					@longpress="lp(itemIndex)">
					<image :src="item.firstImgUrl" mode="aspectFill"></image>
					<view class="listtitle">
						<view class="listtitle1">{{ item.info }}</view>
						<view class="listtitle2">
							<text class="listtitle2son">￥</text>
							{{ item.price }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sellGoodsList: [],
				//id, firstImgUrl, info, price
				longPressedIndex: null, // 记录被长按的项的索引
			}
		},
		methods: {
			lp(index) {
				this.longPressedIndex = index;
				const thisPage = this
				console.log('长按事件-----', index);
				uni.showModal({
					title: '提示',
					content: '请确认是否删除',
					success: async function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							await thisPage.delGoods(index)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			async delGoods(index){
				// console.log('删除了' + index + '号')
				// console.log(this.sellGoodsList[index])
				const app = getApp();
				let thisPage = this;
				// this.sellGoodsList[index].id 即为删除的商品id
				const goodsId = thisPage.sellGoodsList[index].id
				let rhc = app.globalData.rhc
				const res = await uni.request({
					url: app.globalData.api + "/user/delGoods",
					method: 'GET',
					header: {
						'Cookie': rhc
					},
					data: {
						goodsId: goodsId
					}
				});
				const upResult = await uni.request({
					url: app.globalData.api + "/user/goods",
					method: 'GET',
					header: {
						'Cookie': rhc
					}
				});
				thisPage.sellGoodsList = upResult.data.data;
				
			},
			navigateToProductDetail(productId) {
				this.longPressedIndex = null
				uni.navigateTo({
					url: '/pages/goods-details/goods-details?id=' + productId,
					success: function() {
						console.log(productId);
					}
				});
			},
		},
		async created() {
			const app = getApp();
			let thisPage = this;
			let rhc = app.globalData.rhc
			const upResult = await uni.request({
				url: app.globalData.api + "/user/goods",
				method: 'GET',
				header: {
					'Cookie': rhc
				}
			});
			thisPage.sellGoodsList = upResult.data.data;
			console.log('首页瀑布流数据加载完成');
			console.log(upResult);
		},
	}
</script>

<style scoped="scoped" lang="scss">
	page {
		background-color: #eee;
		height: 100%;
	}

	.pubuBox {
		padding: 25rpx;
	}

	.pubuItem {
		padding: 0rpx;
		margin: 5rpx;
		width: 340rpx;
		display: inline-block;
		box-sizing: border-box;
		border-radius: 15rpx;
		overflow: hidden;
		background-color: #fff;
		box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
	}

	.pubuItem.longPressed {
		background-color: lightblue;
	}

	.pubuItem image {
		width: 100%;
		height: 200rpx;
		border-radius: 10rpx;
	}

	.listtitle {
		padding: 22rpx;
		font-size: 24rpx;
	}

	.listtitle1 {
		line-height: 39rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		line-clamp: 2;
		min-height: 39rpx;
		max-height: 78rpx;
	}

	.listtitle2 {
		color: #a9161f;
		font-size: 32rpx;
		line-height: 32rpx;
		font-weight: bold;
		padding-top: 22rpx;
	}

	.listtitle2son {
		font-size: 32rpx;
	}
</style>